<template>
	<view class="content">
		<view class="text-center" style="font-size: 20px">
			{{group_name}}
		</view>

		<form @submit="createAccess">
			<view class="list">
				<view class="list-title">选择模板</view>
				<view class="list-item">模板列表：
					<picker mode="selector" style="padding:0px;margin:0px;" range-key="name" :range="myTplList"
						@change="tplChange">
						<view class="xiala">
							{{tplName}}
							<image src="/static/xl.png"></image>
						</view>
					</picker>
				</view>
				<view>
					<!-- json schema -->
					<json-editor v-if="Object.keys(schema).length && schemaIsShow" ref="JsonEditor" :schema="schema" v-model="model">
						<button @click="submitNone">submit</button>
						<!-- <button @click="reset">Reset</button> -->
					</json-editor>
				</view>
			</view>

			<view class="list">
				<view class="list-title">出入点信息</view>
				<view class="list-item">出入点名称：<input name="name" placeholder="请输入出入点名称" /></view>
				<view class="list-item">出入点地址：<input name="address" placeholder="请输入出入点地址" /></view>
				<view class="list-item">是否启用：<switch :class="is_active?'checked':''" :checked="is_active" name="is_active" @change="activeChange" /></view>
			</view>

			<view class="list">
				<button style="width: 100%;" form-type="submit">创建出入点</button>
			</view>
		</form>
	</view>
</template>

<script>
	// import vue-json-ui-editor
	import JsonEditor from 'vue-json-ui-editor';
	import JsonSchema from "@/common/json-schema/json-schema.vue";

	export default {
		components: {
			JsonEditor,
			JsonSchema
		},
		data() {
			return {
				group_name: "",
				is_active: true,

				myTplList: [],
				tplID: "",
				tplName: '请选择',
				tplErr: 0, // 模板出错

				schemaIsShow: true,
				// schema
				schema: {},
				// data
				model: {}
			}
		},
		onLoad() {
			this.getMyTplList();
		},
		methods: {
			activeChange: function(e) {
				this.is_active = e.target.value;
			},
			submitNone(_e) {
				// alert(JSON.stringify(this.model));
			},
			// reset() {
			// 	this.$refs.JsonEditor.reset();
			// },
			schemaReload () {
				this.schemaIsShow = false;
				this.$nextTick(function () {
					this.schemaIsShow = true;
				});
			},
			getMyTplList() {
				let account_id = uni.getStorageSync("account_id");

				uniCloud.callFunction({
					name: "ha_get_my_tpl",
					data: {
						account_id
					},
					success: ({result}) => {
						// console.log(result)
						this.myTplList = result;
					},
					fail() {
						uni.showToast({
							icon: 'none',
							title: '网络异常，请稍后重试！'
						});
					}
				});
			},
			tplChange: function(e) {
				// console.log(e.detail);
				this.tplID = this.myTplList[e.detail.value]._id
				this.tplName = this.myTplList[e.detail.value].name
				this.schema = this.myTplList[e.detail.value].content;
				this.schemaReload();
			},
			createAccess: function(e) {
				// console.log(e.detail.value);
				let {
					name,
					address,
					is_active
				} = e.detail.value;

				if (this.tplID == "") {
					uni.showToast({
						title: '请选择模板！',
						icon: 'none'
					});
					return;
				}
				if (this.tplErr != 0) {
					uni.showToast({
						title: '模板错误，请重新选择！',
						icon: 'none'
					});
					return;
				}

				name = name.replace(/\s*/g,"");
				if (name.length < 2) {
					uni.showToast({
						title: '名称长度不能小于2',
						icon: 'none'
					});
					return;
				}
				e.detail.value.name = name;
				// if (!address) {
				// 	uni.showToast({
				// 		title: '请输入出入点地址！',
				// 		icon: 'none'
				// 	});
				// 	return;
				// }

				let account_id = uni.getStorageSync("account_id");
				if ( !account_id ) {
					uni.showToast({
						title: '请先登录！',
						icon: 'none'
					})
					return
				}
				let group_id = uni.getStorageSync("group_id");
				if ( !group_id ) {
					uni.showToast({
						title: '请先进入团体，再创建！',
						icon: 'none'
					})
					return
				}

				let data = {
					account_id,
					group_id,
					tpl_id: this.tplID,
					name,
					address,
					is_active
				};

				uniCloud.callFunction({
					name: "ha_add_access",
					data,
					success: ({result}) => {
						// console.log(result);

						if ( result.status === 0 ) {
							uni.showToast({
								title: `${result.msg || "创建成功！"}`,
								duration: 1000
							});
							// location.reload();
							uni.redirectTo({
								url: "/pages/access/access_detail?access_id="+result.access_id
							});
						} else {
							uni.showToast({
								icon: 'none',
								title: `${result.msg || "网络异常，请稍后重试！"}`,
								duration: 1000
							});
						}
					},
					fail() {
						uni.showToast({
							icon: 'none',
							title: '网络异常，请稍后重试！'
						});
					}
				});
			}
		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-bottom: 50upx;
	}

	.list-item input {
		background: #f0f0f0;
		border-radius: 10upx;
		padding-left: 20upx;
		padding-right: 20upx;
		width: 300upx;
		height: 60upx;
		color: #999999;
		font-size: 30upx;

	}

	.xiala {
		display: flex;
		background: #f0f0f0;
		padding: 10upx;
		border-radius: 10upx;
		color: #999999;
		font-size: 30upx;

	}

	.xiala image {
		display: flex;
		padding-top: 5upx;
		width: 30upx;
		height: 30upx;
		margin-left: 10upx;

	}
</style>
